<template>
    <div class="zl">
      <div class="zhuliang">
        <div class="top">
            <span>狗狗主粮</span>
            <span>全部商品</span>
        </div>
        
        <ul class="bottom">
            <li>
                <img src=""/>
                <p>进口狗粮</p>
            </li>
            <li>
                <img src=""/>
                <p></p>
            </li>
            <li>
                <img src=""/>
                <p></p>
            </li>
        </ul>

      </div>
      <div class="pinpai">
        <p>热门品牌</p>
        <ul>
            <li>
                <img src=""/>
                <p>天衡宝 Natural Balance</p>
            </li>

            <li>
                <img src=""/>
                <p>比瑞吉Nature Bridge</p>
            </li>
            <li>
                <img src=""/>
                <p>比瑞吉Nature Bridge</p>
            </li>
            <li>
                <img src=""/>
                <p>比瑞吉Nature Bridge</p>
            </li>
            <li>
                <img src=""/>
                <p>比瑞吉Nature Bridge</p>
            </li>
            <li>
                <img src=""/>
                <p>比瑞吉Nature Bridge</p>
            </li>
        </ul>

      </div>
    </div>
</template>

<script>

export default {

}  
</script>

<style lang="scss" scoped>
    .zl{
        width:3rem ;
        padding: .1rem;
        border-left: 1px solid #ccc;
       
       
        .zhuliang{
            .top{
                width: 100%;
                height: .3rem;
                line-height: .3rem;
                font-size: 12px;
                color:#999;
                border-bottom: 1px solid #ccc;
            }
            span:nth-child(1){
                float: left;
                display: block;
            }
            span:nth-child(2){
                float: right;
                display: block;
            }
            .bottom{
                width: 100%;
                height:1.27rem ;
                 border-bottom: 1px solid #ccc;
                
                li{
                    width: .93rem;
                    height: 1.16rem;
                    float: left;
                }
                img{
                    width: .86rem;
                    height: .86rem;
                }
                p{
                    margin-top: .1rem;
                    font-size: .14rem;
                    margin-bottom: .2rem;
                    width: .86rem;
                    height: .2rem;
                    line-height: .2rem;
                    text-align: center;
                }
            } 
            
     }
      .pinpai{
            p{
                color: #999;
                font-size: .14rem;
                line-height: .3rem;
                height: .3rem;
                margin-top: .1rem;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            li{
                img{
                width: 1.35rem;
                height: .55rem;
                margin: auto;
                  }
                p{
                    width: 1.35rem;
                    font-size: .12rem;
                    color:#333;
                    margin-top: 0;
                }
            }
        } 
    }
</style>